<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/layout.css">
    <style>
        .container {
            width: 980px;
        }

        .main {
            width: 980px;
            height: 440px;
        }

        /* 我的购物车 */
        .main-header {
            width: 100%;
            height: 70px;
        }

        .header-img {
            width: 108px;
            height: 23px;
            background: url(images/mycart.gif);
            display: inline-block;
            margin-top: 20px;
        }

        .main-header span:nth-of-type(2) {
            font-weight: bold;
            margin-left: 30px;
        }

        /* 上半主体 */
        .main-body {
            height: 205px;
        }

        .body-header-img {
            width: 100%;
            height: 32px;
            background: url(images/buytitle_bg.gif);
            display: inline-block;
        }

        .body-header-text {
            margin-left: 50px;
            position: relative;
            top: 5px;
            font-weight: bold;
        }

        /* 表格样式 */
        .table-text {
            float: left;
        }
        .table-origin {
            color: #BCC9DA;
        }
        .table-now {
            color: red;
        }
        /* 第二个黄色长条 */
        .footer-img {
            width: 100%;
            height: 32px;
            background: url(images/buytitle_bg.gif);
            display: inline-block;
        }
        .footer-text {
            margin-left: 50px;
            position: relative;
            top: 5px;
            font-weight: bold;
        }

        .main-footer {
            width: 340px;
            height: 120px;
            margin-left: 320px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <iframe src="header.html" frameborder="0" width="980px"></iframe>
        </div>
        <div class="main">
            <div class="main-header">
                <span class="header-img"></span>
                <span>全场运费一律2元&nbsp;&nbsp;&nbsp;&nbsp;简易计算器</span>
            </div>
            <div class="main-body">
                <div class="body-header">
                    <span class="body-header-img">
                        <span class="body-header-text">确认商品价格与交易条件</span>
                    </span>
                </div>
                <div class="body-text">
                    <table class="body-table" style="width: 100%;">
                        <thead>
                            <tr>
                                <th class="table-text">商品名</th>
                                <th>原价</th>
                                <th>优惠价</th>
                                <th>打折</th>
                                <th>数量</th>
                                <th>删除</th>
                            </tr>
                        </thead>
                        <tr>
                            <th class="table-text">攀高搓捶背靠垫按摩器(蓝色) (定制)</th>
                            <th class="table-origin"><s>￥258.00</s></th>
                            <th class="table-now">￥129.00</th>
                            <th>50折</th>
                            <th><input type="text" name="" id="" value="1"></th>
                            <th>删除</th>
                        </tr>
                        <tr>
                            <th class="table-text">郝彬美国口语美国口语成功训练系统(MP3)</th>
                            <th class="table-origin"><s>￥480.00</s></th>
                            <th class="table-now">￥292.90</th>
                            <th>60折</th>
                            <th><input type="text" name="" id="" value="1"></th>
                            <th>删除</th>
                        </tr>
                        <tr>
                            <th class="table-text">简奥斯汀全集(DVD-9) (赠BBC产 品目录...</th>
                            <th class="table-origin"><s>￥138.00</s></th>
                            <th class="table-now">￥103.90</th>
                            <th>80折</th>
                            <th><input type="text" name="" id="" value="1"></th>
                            <th>删除</th>
                        </tr>
                        <tr>
                            <th class="table-text">继续挑选商品</th>
                            <th colspan="2">￥527.40</th>
                            <th colspan="2">你共节省：￥348.60</th>
                        </tr>
                    </table>
                </div>
                <div class="body-footer">
                    <span class="footer-img">
                       <span class="footer-text">补充您的邮件地址和联系人基本信息</span> 
                    </span>
                </div>
            </div>
            <div class="main-footer">
                <table>
                    <tr>
                        <th>收件人:</th>
                        <th><input type="text" name="" id="" style="width: 200px;"></th>
                        <th>&nbsp;</th>
                    </tr>
                    <tr>
                        <th>地&nbsp;址:</th>
                        <th><input type="text" name="" id="" style="width: 200px;"></th>
                        <th>请填写地址</th>
                    </tr>
                    <tr>
                        <th>电&nbsp;话:</th>
                        <th colspan="2">
                            <input type="text" name="" id="" style="width: 15px;">-
                            <input type="text" name="" id="" style="width: 65px;">-
                            <input type="text" name="" id=""style="width: 15px;">(区号-电话号码-分机)
                        </th>
                    </tr>
                    <tr>
                        <th colspan="3">
                            <input type="image" src="images/submit.gif" alt="">
                        </th>
                    </tr>
                </table>
            </div>
        </div>
        <div class="footer.html">
            <iframe src="footer.html" frameborder="0" width="980px"></iframe>
        </div>
    </div>
</body>

</html>